<template>
    <el-affix>
        <MainHeader @setOtherUser_id="setOtherUser_id"/>
    </el-affix>
    <div style="background-color: #f6f6f6;">
        <div id="profileHead" style="background-color: #f6f6f6;">
    <div id="profileHeadCard">
        <div id="profileHeadUserCover">
            <div>
                <img :src="pictureError ? 
                '//images.weserv.nl/?url=150.158.52.191:8080/PersonalBackground/default' : 
                '//images.weserv.nl/?url=150.158.52.191:8080/PersonalBackground/' + 
                this.userInfo.id" 
                @error="pictureError = !pictureError"
                style="width: 100%; height: 240px;"
                ref="picture">
            </div>
        </div>
        <div id="profileHeadUserWrapper">
            <div id="profileHeadUserWrapperMain">
                <div id="userAvatar">
                    <img :src="avatarError ?
                    '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default' :
                    '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' + 
                    this.userInfo.id" width="160" height="160"
                    @error="avatarError = !avatarError"
                    ref="avatar">
                </div>
                <input ref="avatarInput" type="file" accept="image/*" style="display: none" @change="handleAvatarFileChange">
                <div id="content">
                    <div style="text-align: left; margin-bottom: 4px;">
                        <el-label class="userName">{{ userInfo.username }}</el-label>
                        <span>
                            <el-icon v-if=" this.userInfo.gender == 'Female' "><Female /></el-icon>
                            <el-icon v-if=" this.userInfo.gender == 'Male' "><Male /></el-icon>
                        </span>
                    </div>
                    <div style="text-align: left">
                        <i>{{ userInfo.simple_desc }}</i>
                    </div>
                    <div id="userFooter">
                        <el-button link @click="userInfoDialogShow"><el-icon><ArrowDown /></el-icon>查看详细资料</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div id="profileMain" style="background-color: #f6f6f6;">
    <div id="profileMain_Main" style="width:694px; background: #fff">
        <el-tabs type="card" @tab-click="tabhandleClick" ref="tabsMain">
        <el-tab-pane :label="'回答 ' + this.answer.answer_answerListCount" name="answer">
            <el-tabs @tab-click="tabhandleClick" model-value="answer.answer_answerList">
                <el-tab-pane label="ta的回答" name="answer.answer_answerList">
                    <el-empty 
                    v-if="answer.answer_answerListCount == 0" 
                    :image-size="300" 
                    description="ta暂时还没有回答过问题哦o(*￣3￣)o" />
                    <div v-for="answer in this.answer.answer_answerList" :key="answer.answer_id">
                        <div class="showListItemInfo" @click="goToQuestionDetail(answer.question_id)">
                            <h2 style="text-align: left; margin-bottom: 8px; margin-top: 5px;">{{ answer.question_title }}</h2>
                            <div v-html="this.md.render(answer.answer_content)" style="text-align: left; margin-bottom: 4px; margin-top: 5px;"></div>
                            <!-- <h5 style="text-align: left; margin-bottom: 4px; margin-top: 5px;">{{ answer.answer_content }}</h5> -->
                            <div style="font-size: 8px; color: #8590a6; margin-bottom: 5px;">
                                <span style="padding-right: 10px;">{{ answer.like_count == null ? 0 : answer.like_count }}赞</span>
                                <span style="padding-right: 10px;">{{ answer.comment_count == null ? 0 : answer.comment_count }}评论</span>
                                <span>{{ answer.create_time }}</span>
                            </div>
                        </div>
                        <el-divider class="divider"/>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-tab-pane>
        <el-tab-pane :label="'提问 ' + this.question.question_questionListCount" name="question">
            <el-tabs @tab-click="tabhandleClick" model-value="question.question_questionList">
                <el-tab-pane label="ta的提问" name="question.question_questionList">
                    <el-empty 
                    v-if="this.question.question_questionListCount == 0" 
                    :image-size="300" 
                    description="ta暂时还未提出过问题哦￣O￣)ノ" />
                <div v-for="question in this.question.question_questionList" :key="question.question_id">
                    <div class="showListItemInfo" @click="goToQuestionDetail(question.question_id)">
                        <h2 style="text-align: left; margin-bottom: 8px; margin-top: 5px;">{{ question.question_title }}</h2>
                        <h5 style="text-align: left; margin-bottom: 4px; margin-top: 5px;">{{ question.question_content }}</h5>
                        <div style="font-size: 8px; color: #8590a6; margin-bottom: 5px;">
                            <span style="padding-right: 10px;">{{ question.like_count == null ? 0 : answer.like_count }}赞</span>
                            <span style="padding-right: 10px;">{{ question.follow_count == null ? 0 : answer.comment_count }}收藏</span>
                            <span>{{ question.create_time }}</span>
                        </div>
                    </div>
                    <el-divider class="divider"/>
                </div>
                
                </el-tab-pane>
            </el-tabs>
        </el-tab-pane>
        <el-tab-pane :label="'收藏 ' + this.collection.collection_collectionListCount">
            <el-empty 
            v-if="this.collection.collection_collectionListCount == 0" 
            :image-size="300" 
            description="ta暂时还没有收藏(☆▽☆)"/>
            <div 
            v-for="collection in collection.collection_collectionList" 
            :key="collection.collection_id">
                <div class="showList">
                    <div class="showListItemInfo" @click="goToQuestionDetail(collection.question_id)">
                        <h2 style="text-align: left; margin-bottom: 8px; margin-top: 5px;">{{ collection.question_title }}</h2>
                        <div v-html="this.md.render(collection.answer_content)" style="text-align: left; margin-bottom: 4px; margin-top: 5px;"></div>
                        <!-- <h5 style="text-align: left; margin-bottom: 4px; margin-top: 5px;">{{ collection.answer_content }}</h5> -->
                        <div style="font-size: 8px; color: #8590a6; margin-bottom: 5px;">
                            <span style="padding-right: 10px;">来自{{ collection.user_id }}</span>
                            <span>{{ collection.create_time }}</span>
                        </div>
                    </div>
                </div>
                <el-divider class="divider"/>
            </div>
        </el-tab-pane>
        <el-tab-pane :label="'关注 ' + this.follow.follow_followListCount" name="follow">
            <el-tabs @tab-click="tabhandleClick" model-value="follow">
                <el-tab-pane :label="'ta的关注 ' + this.follow.follow_followListCount" name="follow_followList">
                    <el-empty v-if="this.follow.follow_followListCount == 0" :image-size="300" description="ta暂时还没有关注"/>
                    <div v-for="follow in follow.follow_followList" :key="follow.id">
                        <div class="showList">
                            <div class="showListItemImage">
                                <el-image 
                                :src="follow.avatar ?
                                '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default' :
                                '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' + follow.id" 
                                @error="follow.avatar = !follow.avatar"
                                style="width: 60px; height: 60px; margin-left: 10px;" />
                            </div>
                            <div class="showListItemDesc">
                                <h2 style="text-align: left;">{{ follow.username }}</h2>
                                <div>
                                    <div style="font-size: 8px; color: #8590a6">
                                        <span style="padding-right: 10px;">{{ 0 }}回答</span>
                                        <span style="padding-right: 10px;">{{ 0 }}文章</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-pagination background layout="prev, pager, next" :total=follow.follow_collectionListCount style="margin: 20px 0 10px 10px;"/>
                </el-tab-pane>
                <el-tab-pane :label="'关注ta的人 ' + this.fan.follow_fansListCount" name="follow_fansList">
                    <el-empty v-if="this.fan.follow_fansListCount == 0" :image-size="300" description="没人关注哭哭/(ㄒoㄒ)/~~"/> 
                    <div v-for="fan in fan.follow_fansList" :key="fan.id">
                        <div class="showList">
                            <div class="showListItemImage">
                                <el-image 
                                :src="fan.avatar ?
                                '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default' :
                                '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' + fan.id" 
                                @error="follow.avatar = !follow.avatar"
                                style="width: 60px; height: 60px; margin-left: 10px;"></el-image>
                            </div>
                            <div class="showListItemDesc">
                                <h2 style="text-align: left;">{{ fan.username }}</h2>
                                <div>
                                    <div style="font-size: 8px; color: #8590a6">
                                        <span style="padding-right: 10px;">{{ 0 }}回答</span>
                                        <span style="padding-right: 10px;">{{ 0 }}文章</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'ta关注的话题 ' + this.follow_topic.follow_topicListCount" name="follow_topicList">
                    <el-empty v-if="this.follow_topic.follow_topicListCount == 0" :image-size="300" description="ta暂时还未关注任何话题(´▽`ʃ♡ƪ)"></el-empty>
                    <div v-for="topic in follow_topic.follow_topicList" :key="topic.id">
                        <div class="showList">
                            <div class="showListItemImage">
                                <el-image :src="topic.topic_image" style="width: 60px; height: 60px; margin-left: 10px;"></el-image>
                            </div>
                            <div class="showListItemInfo">
                                <h2 style="text-align: left; margin-bottom: 8px;">{{ topic.topic_name }}</h2>
                                <div>
                                    <div style="font-size: 8px; color: #8590a6">
                                        <h5 style="padding-right: 10px; text-align: left;">{{ topic.topic_desc }}</h5>
                                        <p>关注数:{{ topic.followed_count == null ? 0 : topic.followed_count }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'ta关注的问题 ' + this.follow_question.follow_questionListCount" name="follow_questionList">
                    <el-empty v-if="this.follow_question.follow_questionListCount == 0" :image-size="300" description="ta暂时还未关注过任何问题(σ｀д′)σ"></el-empty>
                    <div v-for="question in follow_question.follow_questionList" :key="question.id">
                        <div class="showList">
                            <div class="showListItemInfo">
                                <h2 style="text-align: left; margin-bottom: 8px;">{{ question.question_title }}</h2>
                                <div>
                                    <div style="font-size: 8px; color: #8590a6">
                                        <h5 style="padding-right: 10px; text-align: left;">{{ question.question_content }}</h5>
                                        <span style="padding-right: 10px;">关注数:{{ question.followed_count == null ? 0 : question.followed_count }}</span>
                                        <span>{{ question.create_time }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-tab-pane>
    </el-tabs>
    </div>

    <div id="profileMain_Side" style="background: #fff">
        <div>
            <div>
                <div id="followShip">
                    <a type="button" class="followShipBtn">
                        <div>
                            <div class="followShipItem">关注数</div>
                            <div class="followShipNumber">{{ follow.follow_followListCount }}</div>
                        </div>
                    </a>
                    <el-divider direction="vertical" style="height: auto;"/>
                    <a type="button" class="followShipBtn">
                        <div>
                            <div class="followShipItem">粉丝数</div>
                            <div class="followShipNumber">{{ fan.follow_fansListCount }}</div>
                        </div>
                    </a>
                </div>
                <div id="followList">
                    <el-link class="followListLink" :underline="false">
                        <span class="followListLinkName">关注的话题</span>
                        <span class="followListLinkValue" style="margin-right: 5px;">{{ follow_topic.follow_topicListCount }}</span>
                    </el-link>
                    <el-link class="followListLink" :underline="false">
                        <span class="followListLinkName">关注的问题</span>
                        <span class="followListLinkValue" style="margin-right: 5px;">{{ follow_question.follow_questionListCount }}</span>
                    </el-link>
                </div>
                <div>
                    一些底部信息
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

    <el-dialog v-model="infoDialogFromVisable" title="个人信息">
        <div class="dialogContent">
            <el-form :model="this.userInfo" label-width="100px" style="width : 500px" >
                <el-form-item label="用户名">
                    <el-text style="text-align: center;">{{ this.userInfo.username }}</el-text>
                </el-form-item>
                <el-form-item label="邮箱" class="fromItem">
                    <el-text>{{ this.userInfo.email }}</el-text>
                </el-form-item>
                <el-form-item label="性别" class="fromItem">
                    <el-text>{{ this.userInfo.gender == 1 ? "女" : "男" }}</el-text>
                </el-form-item>
                <el-form-item label="住址" class="fromItem">
                    <el-text>{{ this.userInfo.position == null ? "暂无" : this.userInfo.position }}</el-text>
                </el-form-item>
                <el-form-item label="职业" class="fromItem">
                    <el-text>{{ this.userInfo.career == null ? "暂无" : this.userInfo.career }}</el-text>
                </el-form-item>
                <el-form-item label="教育程度" class="fromItem">
                    <el-text>{{ this.userInfo.education == null ? "暂无" : this.userInfo.education }}</el-text>
                </el-form-item>
                <el-form-item label="简要描述" class="fromItem">
                    <el-text>{{ this.userInfo.simple_desc == null ? "暂无" : this.userInfo.simple_desc }}</el-text>
                </el-form-item>
                <el-form-item label="详细描述" class="fromItem">
                    <el-text>{{ this.userInfo.full_desc == null ? "暂无" : this.userInfo.full_desc }}</el-text>
                </el-form-item>      
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'
import { ElNotification, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import MarkdownIt from 'markdown-it';

export default {
    data(){
        return{
            userInfo : {},
            follow : {
                follow_followList : [], //用户关注列表
                follow_followListCount : 0, //用户关注数
            },
            fan : {
                follow_fansList : [], //粉丝列表
                follow_fansListCount : 0,   //粉丝数
            },
            follow_question : {
                follow_questionList : [],   //关注提问列表
                follow_questionListCount : 0,   //关注问题数量
            },
            follow_collection : {
                follow_collectionList : [], //关注收藏列表
                follow_collectionListCount : 0, //关注收藏数量
            },
            follow_topic : {
                follow_topicList : [],
                follow_topicListCount : 0,
            },
            question : {
                question_questionList : [],   //提问列表
                question_questionListCount : 0, //提问数量
            },
            answer : {
                answer_answerList : [], //回答列表
                answer_answerListCount : 0, //回答数量
            },
            collection : {
                collection_collectionList : [],
                collection_collectionListCount : 0,
            },
            avatarError : false,
            pictureError : false,
            router : useRouter(),
            md : new MarkdownIt(),
            infoDialogFromVisable : false,
        }
    },
    activated(){
        console.log("1");
        this.getPersonalInfo()
    },
    methods:{
        setOtherUser_id(id){
            this.userInfo.id = id
        },
        getPersonalInfo(){
            axios.get(`${this.$target}/user/`+ this.userInfo.id + "/info")
            .then(respone => {
                this.userInfo = respone.data.data
            })
            .catch(error => {
                console.log("获取用户信息失败" + error)
            })


            //获取用户关注数
            axios.get(`${this.$target}/follow/count?user_id=` + this.userInfo.id + "&type=0")
            .then(respone => {
                this.follow.follow_followListCount = respone.data.data
            })
            .catch(error => {
                console.log( "获取用户关注数失败" + error)
            })

            //获取用户粉丝数
            axios.get(`${this.$target}/follow/fans/count?id=` + this.userInfo.id + "&type=0")
            .then(respone => {
                this.fan.follow_fansListCount = respone.data.data
            })
            .catch(error => {
                console.log( "获取用户粉丝数失败" + error)
            })

            //获取用户回答列表和数量
            axios.get(`${this.$target}/answer/user_id?user_id=` + this.userInfo.id)
            .then(respone => {
                this.answer.answer_answerList = respone.data.data
                this.answer.answer_answerListCount = this.answer.answer_answerList.length

                for(var i=0;i<this.answer.answer_answerListCount;i++){
                    axios.get(`${this.$target}/question/detail?question_id=` + this.answer.answer_answerList[i].question_id)
                    .then(respone => {       
                        for(var i=0;i<this.answer.answer_answerListCount;i++){
                            if(this.answer.answer_answerList[i].answer_id == respone.data.data.answer_id){
                                this.answer.answer_answerList[i].question_title = respone.data.data.question_title
                                break
                            }
                        }
                    })
                    .catch(error => {
                        console.log("获取用户回答问题标题失败" + error)
                    })
                }
            })
            .catch(error => {
                console.log("获取用户回答失败" + error)
            })

            //获取用户提问列表和数量
            axios.get(`${this.$target}/question/user_id?user_id=` + this.userInfo.id)
            .then(respone => {
                this.question.question_questionList = respone.data.data
                this.question.question_questionListCount = this.question.question_questionList.length
            })
            .catch(error => {
                console.log("获取用户提问失败" + error)
            })

            //获取用户关注问题列表和数量
            axios.get(`${this.$target}/follow?user_id=` + this.userInfo.id +"&type=1")
            .then(respone => {
                this.follow_question.follow_questionList = respone.data.data.questionList
                if(respone.data.data.questionList == undefined)
                {
                    this.follow_question.follow_questionListCount = 0
                }else{
                    this.follow_question.follow_questionListCount = respone.data.data.questionList.length
                }
                
                for(var i=0;i<this.follow_question.follow_questionListCount;i++){
                    this.follow_question.follow_questionList[i].status = true;
                }
            })
            .catch(error => {
                console.log("获取用户关注问题列表失败" + error)
            })

            //获取用户关注话题列表和数量
            axios.get(`${this.$target}/follow?user_id=` + this.userInfo.id +"&type=2")
            .then(respone => {
                this.follow_topic.follow_topicList = respone.data.data.topicList
                if(respone.data.data.topicList == undefined){
                    this.follow_topic.follow_topicListCount = 0
                }else{
                    this.follow_topic.follow_topicListCount = respone.data.data.topicList.length
                }
                for(var i=0;i<this.follow_topic.follow_topicListCount;i++){
                    this.follow_topic.follow_topicList[i].status = true
                }
            })
            .catch(error => {
                console.log("获取用户关注话题列表失败" + error)
            })

            //获取用户收藏数
            axios.get(`${this.$target}/collection?user_id=` + this.userInfo.id)
            .then(respone => {
                this.collection.collection_collectionList = respone.data.data
                this.collection.collection_collectionListCount = respone.data.data.length
                for(var i=0;i<this.collection.collection_collectionListCount;i++){
                    this.collection.collection_collectionList[i].status = true;
                }

                
            })
            .catch(error => {
                ElNotification({
                    title: '错误',
                    message: '获取用户收藏失败',
                    type: 'error',
                })
            })
        },
        tabhandleClick(tab,event){
            switch(tab.props.name){
                case "follow_followList":{
                    //获取关注列表并展示
                    axios.get("http://127.0.0.1:8080/follow?user_id=" + this.userInfo.id + "&type=0")
                    .then(respone => {
                        this.follow.follow_followList = respone.data.data.userList
                        for(var i=0;i<this.follow.follow_followListCount;i++){
                            this.follow.follow_followList[i].status = true
                            this.follow.follow_followList[i].avatar = false
                        }
                        console.log(this.follow.follow_followList)
                    })
                    .catch(error => {
                        console.log("获取关注列表失败" + error)
                    })
                };break;
                case "follow_fansList":{
                    //获取粉丝列表并展示
                    axios.get("http://127.0.0.1:8080/follow/fans?id=" + this.userInfo.id)
                    .then(respone => {
                        this.fan.follow_fansList = respone.data.data
                        for(var i=0;i<this.fan.follow_fansListCount;i++){
                            this.fan.follow_fansList[i].avatar = false
                        }
                    })
                    .catch(error => {
                        console.log("获取粉丝列表失败" + error)
                    })
                };break;
                default:{
                    console.log("无")
                }
            }
        },
        goToQuestionDetail(id){
            console.log("111111")
            let page = this.router.resolve({
                path: "/QuestionDetail",
                query: {
                    question_id: id,
                },
            });
            window.open(page.href, "_blank");
        },
        gotoPersonalPage(id){
            let page = this.router.resolve({
                path: "/Other",
                query: {
                    user_id: id,
                },
            });
            window.open(page.href, "_blank");
        },
        userInfoDialogShow(){
            console.log("1111")
            this.infoDialogFromVisable = true
        }
        }
}
</script>

<style>
#profileHeadCard {
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 10px;
    background-color: #fff;
}

#profileHeadUserCover{
    position: relative;
}

#uploadPictureBtn {
    position: absolute;
    right: 24px;
    top: 20px;
    z-index: 2;
    background-color: transparent;
}

#userAvatar {
    left: 0;
    position: absolute;
    top: -65px;
    z-index: 1;
    border: 4px solid #fff;
    width: 160px;
    height: 160px;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

#content{
    border-left: 164px solid transparent;
    padding-left: 32px;
    padding-top: 16px;
}

.userName {
    font-size: 32px;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;
}

#profileHeadUserWrapper{
    position: relative;
}

#profileHeadUserWrapperMain{
    margin: 0 20px 24px;
    position: relative;
}

#userFooter{
    text-align: left;
    padding-top: 16px;
    position: relative;
}

#userFooterEditBtn{
    bottom: 0;
    position: absolute;
    right: 0;
}

#profileMain{
    margin: 10px auto;
    min-height: 100vh;
    padding: 25px 16px;
    width: 1000px;
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
}

#creatorCart{
    margin-bottom: 50px;
    display: flex;
    width: 100%;
    align-items: center;

    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
}

#creatorHint{
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
    display: flex;
    margin: 10px 5px 10px 5px;
}

#creatorCenter{
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    flex-grow: 1;
    line-height: 16px;
    margin-left: 4px;
    text-align: left;
}

#creatorContent{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    width: 262px;
    -webkit-box-align: center;
    align-items: center;
    height: 98px;
    padding-left: 14px;
    padding-right: 14px;
    display: flex;
    background: rgba(133, 144, 166, 0.05);
    border-radius: 4px;
}

#creatorDesc{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    flex: 1 1 0%;
}

#creatorDescTittle{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    font-size: 15px;
    line-height: 21px;
    color: rgb(68, 68, 68);
}

#creatorDescContext{
    box-sizing: border-box;
    margin: 6px 0px 0px;
    min-width: 0px;
    font-size: 12px;
    color: rgb(153, 153, 153);
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
}

#goToCreatLink{
    box-sizing: border-box;
    margin: 10px 0px 18px;
    min-width: 0px;
    justify-content: center;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    border: 1px solid rgba(5, 109, 232, 0.5);
    color: rgb(5, 109, 232);
    border-radius: 4px;
    cursor: pointer;
    height: 40px;
    font-size: 14px;
}

#followShip{
    display: flex;
}

.followShipBtn{
    flex: 1 1;
}

.followShipItem{
    font-size: 14px;
    color: #8590a6;
    line-height: 1.6;
}

.followShipNumber{
    font-weight: 600;
    color: #121212;
    font-size: 18px;
    line-height: 1.6
}

#followList{
    padding-top: 10px;
}

.followListLink{
    display: flex;
    font-size: 14px;
    height: 46px;
    padding-left: 5px;
}

.followListLinkName{
    flex-grow: 1;
    width: 260px;
    text-align: left
}

.followListLinkValue{

}

#collectCreatBtn{
    border: none;
}

.showList{
    position: relative; 
    display: flex; 
    margin-top: 10px;
}

.showListItemImage{
    float: left; 
    margin-right: 16px; 
    display: flex; 
    align-items: center;
}

.showListItemDesc{
    flex: 1 1; 
    margin-right: 6px; 
    overflow: hidden; 
    text-align: left;
}

.showListItemInfo{
    flex: 1 1; 
    margin-right: 6px; 
    overflow: hidden; 
    text-align: left;
    margin-left: 5px;
}

.followStatusBtn{
    align-items: center; 
    position: relative; 
    display: flex; 
    margin-right: 15px;
}


.divider{
    margin-top: 5px;
    margin-bottom: 5px;
}

.getCode {
        position: absolute;
        right: 28px;
        font-weight: bold;
        cursor: pointer;
}

.formItem{
    flex: 1;
    line-height: 32px;
}
</style>
